/* --- VDS-2025 CORE VARIABLES --- */
    :root {
        --c-white: #FFFFFF;
        --c-black: #111827;
        --c-gray-50: #F9FAFB;
        --c-gray-100: #F3F4F6;
        --c-gray-200: #E5E7EB; 
        --c-gray-500: #6B7280;
        --c-gray-900: #111827;
        --c-audit-blue: #2563EB;
        --c-alert-orange: #D97706;
        --c-pass-green: #059669;
        --f-sans: 'Inter', sans-serif;
        --f-mono: 'JetBrains Mono', monospace;
        --h-nav: 72px;
    }

    /* --- GLOBAL RESET & AUDIT STYLE --- */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--c-white); font-family: var(--f-sans); color: var(--c-black); -webkit-font-smoothing: antialiased; }
    a { text-decoration: none; color: inherit; }
    button { border: none; background: none; cursor: pointer; }
    ul { list-style: none; }
    
    .bg-grid { background-image: radial-gradient(var(--c-gray-200) 1px, transparent 1px); background-size: 20px 20px; }

    /* --- 1. SYSTEM STATUS BAR --- */
    .system-bar {
        background: var(--c-black); color: var(--c-white); height: 32px;
        font-family: var(--f-mono); font-size: 10px; display: flex;
        justify-content: space-between; align-items: center; padding: 0 40px;
        letter-spacing: 0.05em; position: relative; z-index: 2000;
    }
    .dot-pulse { width: 6px; height: 6px; background: #10B981; border-radius: 50%; display: inline-block; margin-right: 8px; animation: pulse 2s infinite; }
    @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

    /* --- 2. HEADER & MEGA MENU --- */
    .v-nav {
        background: var(--c-white); height: var(--h-nav); border-bottom: 1px solid var(--c-gray-200);
        display: flex; align-items: center; justify-content: space-between; 
        padding: 0 40px; position: sticky; top: 0; z-index: 1000;
    }
    
    /* Desktop Menu Styles */
    .v-menu { display: flex; height: 100%; margin-left: 40px; flex-grow: 1; }
    .v-item { height: 100%; display: flex; align-items: center; position: static; cursor: pointer; }
    .v-link { 
        padding: 0 18px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; 
        text-transform: uppercase; height: 100%; display: flex; align-items: center; 
        width: 100%; justify-content: space-between; border-left: 1px solid transparent; border-right: 1px solid transparent;
    }
    .v-item:hover .v-link { color: var(--c-audit-blue); background: var(--c-gray-50); border-color: var(--c-gray-200); }

    /* Desktop Actions */
    .v-actions { display: flex; gap: 15px; margin-left: auto; }

    .v-mega {
        position: absolute; top: var(--h-nav); left: 0; width: 100%;
        background: var(--c-white); border-bottom: 1px solid var(--c-gray-200);
        display: none; grid-template-columns: 280px 280px 280px 1fr; /* Adjusted for new layout */
        min-height: 420px;
        max-width: 100vw; /* 防止溢出视口 */
        overflow-x: hidden; /* 隐藏水平溢出 */
        box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        z-index: 1001;
    }
    /* Desktop Hover Trigger */
    @media (min-width: 1025px) {
        .v-item:hover .v-mega { display: grid; }
    }

    .mega-col { border-right: 1px solid var(--c-gray-200); padding: 40px 32px; display: flex; flex-direction: column; overflow-wrap: break-word; word-wrap: break-word; }
    .mega-col.visual { 
        background-color: var(--c-gray-50);
        background-image: linear-gradient(var(--c-gray-200) 1px, transparent 1px), linear-gradient(90deg, var(--c-gray-200) 1px, transparent 1px);
        background-size: 20px 20px; 
        border-right: none;
        justify-content: center; align-items: center; padding: 40px;
    }

    .col-head { 
        font-family: var(--f-mono); font-size: 10px; color: var(--c-gray-500); 
        text-transform: uppercase; border-bottom: 1px solid var(--c-black); 
        padding-bottom: 12px; margin-bottom: 24px; display: flex; justify-content: space-between;
    }
    
    .mega-list li { margin-bottom: 8px; }
    .mega-link { 
        display: flex; justify-content: space-between; align-items: center;
        padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--c-black);
        border-bottom: 1px solid #F3F4F6; transition: all 0.1s;
    }
    .mega-link:hover { color: var(--c-audit-blue); padding-left: 8px; border-bottom-color: var(--c-audit-blue); background: rgba(37, 99, 235, 0.02); }
    .mega-link span.arrow { opacity: 0; font-family: var(--f-mono); font-size: 10px; }
    .mega-link:hover span.arrow { opacity: 1; }

    /* Tags */
    .tag { font-family: var(--f-mono); font-size: 9px; padding: 2px 6px; border: 1px solid; text-transform: uppercase; }
    .tag.blue { color: var(--c-audit-blue); border-color: var(--c-audit-blue); background: #EFF6FF; }
    .tag.orange { color: var(--c-alert-orange); border-color: var(--c-alert-orange); background: #FFF7ED; }
    .tag.green { color: var(--c-pass-green); border-color: var(--c-pass-green); }
    .tag.gray { color: var(--c-gray-500); border-color: var(--c-gray-200); }
    .file-ext { font-family: var(--f-mono); font-size: 10px; color: var(--c-gray-500); }
    .nav-alert-dot { 
        width: 6px; 
        height: 6px; 
        background: var(--c-alert-orange); 
        border-radius: 50%; 
        margin-left: 6px; 
        display: inline-block;
        /* 新增：默认隐藏并添加过渡效果 */
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.2s ease-out;
    }
    .v-item:hover .nav-alert-dot {
        opacity: 1;
        transform: scale(1);
    }

    /* Product Series Cards (New) */
    .series-card {
        border: 1px solid var(--c-gray-200); padding: 16px; margin-bottom: 12px;
        cursor: pointer; transition: all 0.2s; background: white;
    }
    .series-card:hover { border-color: var(--c-audit-blue); box-shadow: 4px 4px 0 rgba(37, 99, 235, 0.1); transform: translateY(-1px); }
    .series-head { font-weight: 800; font-size: 13px; display: flex; justify-content: space-between; color: var(--c-black); }
    .series-meta { font-family: var(--f-mono); font-size: 10px; color: var(--c-gray-500); margin-top: 6px; display: block; line-height: 1.4; }

    /* Visual Cards */
    .visual-card { background: white; border: 1px solid var(--c-gray-200); padding: 32px; width: 100%; max-width: 320px; text-align: center; display: flex; flex-direction: column; align-items: center; }
    .vc-title { font-family: var(--f-sans); font-weight: 700; font-size: 14px; margin-top: 20px; }
    .vc-desc { font-family: var(--f-mono); font-size: 10px; color: var(--c-gray-500); margin: 8px 0 20px 0; line-height: 1.5; }
    .vc-btn { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; border-bottom: 1px solid var(--c-audit-blue); padding-bottom: 2px; color: var(--c-audit-blue); }
    .vc-btn:hover { background: var(--c-audit-blue); color: white; border-bottom: none; }

    /* Engineering shapes */
    .shape-grain { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--c-black); background-image: radial-gradient(circle, #000 1px, transparent 1px); background-size: 10px 10px; position: relative; }
    .shape-grain::after { content:''; position:absolute; top:20px; right:-10px; width:40px; height:40px; border: 1px solid var(--c-audit-blue); background: rgba(37,99,235,0.1); border-radius: 50%; }
    .shape-doc { width: 60px; height: 80px; border: 2px solid var(--c-black); position: relative; }
    .shape-doc::before { content:''; position: absolute; top: 10px; left: 10px; width: 40px; height: 2px; background: var(--c-gray-200); box-shadow: 0 10px 0 var(--c-gray-200), 0 20px 0 var(--c-gray-200); }
    .shape-badge { position: absolute; bottom: -10px; right: -10px; width: 30px; height: 30px; background: var(--c-pass-green); color: white; font-size: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; }

    /* Search & Buttons */
    .trace-box { border:1px solid #E5E7EB; height:40px; padding:0 15px; display:flex; align-items:center; background:#FFF; transition: border-color 0.2s; }
    .trace-box:focus-within { border-color: var(--c-audit-blue); }
    .trace-input { border:none; outline:none; font-family:var(--f-mono); font-size:10px; width:100px; text-transform:uppercase; }
    .btn-primary { background: var(--c-black); color: white; font-family: var(--f-mono); font-size: 12px; padding: 0 30px; height: 40px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-black); transition: all 0.2s; }
    .btn-primary:hover { background: var(--c-audit-blue); border-color: var(--c-audit-blue); }

    /* Mobile Toggle */
    .mobile-toggle { display: none; font-family: var(--f-mono); font-size: 12px; font-weight: 800; color: var(--c-black); border: 1px solid var(--c-gray-200); padding: 8px 12px; }
    .mobile-actions-container { display: none; }

    /* --- 3. HERO & GRID --- */
    .hero { padding: 100px 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; max-width: 1440px; margin: 0 auto; }
    .hero-title { font-size: 60px; font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 25px; }
    
    .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--c-gray-200); border-left: 1px solid var(--c-gray-200); max-width: 1440px; margin: 0 auto; }
    .grid-item { padding: 50px 40px; border-right: 1px solid var(--c-gray-200); border-bottom: 1px solid var(--c-gray-200); transition: 0.2s; }
    .grid-item:hover { background: var(--c-gray-50); }
    .sys-code { font-family: var(--f-mono); font-size: 14px; font-weight: bold; width: 45px; height: 45px; border: 1px solid #000; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }

    /* --- 4. FOOTER --- */
    .v-footer { border-top: 1px solid var(--c-gray-200); padding: 80px 40px 40px; background: white; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 60px; max-width: 1440px; margin: 0 auto; }
    .trinity { font-family: var(--f-mono); font-size: 10px; border-left: 2px solid var(--c-audit-blue); padding-left: 15px; margin-top: 20px; line-height: 1.8; color: var(--c-gray-500); }

/* ========================================= */
    /* === MOBILE RESPONSIVE STYLES (≤1024px) === */
    /* ========================================= */
    @media (max-width: 1024px) {
        .system-bar { padding: 0 20px; }
        .v-nav { padding: 0 20px; justify-content: space-between; }
        .v-menu, .v-actions, .system-bar div:nth-child(2) { display: none !important; }
        .mobile-toggle { display: block; z-index: 1002; }

        .v-menu.active {
            display: flex !important; flex-direction: column; position: fixed;
            top: calc(var(--h-nav) + 32px); left: 0; width: 100%; height: calc(100vh - var(--h-nav) - 32px);
            background: #FFFFFF !important; overflow-y: auto; padding-bottom: 80px; z-index: 1001;
            border-top: 1px solid var(--c-gray-200); margin-left: 0;
        }

        .v-item { 
            display: block; 
            width: 100%; 
            border-bottom: 1px solid var(--c-gray-200); 
            background: #fff; 
            margin: 0;
            height: auto;
        }
        .v-item:last-child { border-bottom: none; }
        .v-link { 
            padding: 20px 25px; 
            background: transparent; 
            color: var(--c-black); 
            font-size: 15px; 
            font-weight: 700; 
            width: 100%; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            cursor: pointer; 
            border: none; 
            margin: 0;
            box-sizing: border-box;
            height: auto;
        }
        .v-link::after { content: '+'; font-size: 18px; color: var(--c-gray-500); font-weight: 400; }
        .v-item.no-submenu .v-link::after { display: none; }

        .v-item.open:not(.no-submenu) .v-link { background: var(--c-black); color: var(--c-white); }
        .v-item.open:not(.no-submenu) .v-link::after { content: '-'; color: var(--c-white); }

        .v-mega { 
            display: none; 
            position: static; 
            width: 100%; 
            background: var(--c-white); 
            border-bottom: 1px solid var(--c-gray-200); 
            grid-template-columns: 1fr; 
            min-height: auto; 
            box-shadow: none; 
            margin: 0;
            padding: 0;
        }
        .v-item.open .v-mega { display: block !important; }

        .mega-col { 
            display: block; 
            border-right: none; 
            border-bottom: 1px solid var(--c-gray-200); 
            padding: 24px 25px; 
            width: 100%; 
            background: var(--c-white);
            margin: 0;
        }
        .mega-col:last-child { border-bottom: none; }
        .mega-col.visual { display: none; }

        .col-head { 
            display: block; 
            color: var(--c-audit-blue) !important; 
            font-size: 11px; 
            font-weight: 800; 
            margin-bottom: 16px; 
            padding-bottom: 8px; 
            border-bottom: 1px solid rgba(37, 99, 235, 0.2); 
        }
        .mega-list { 
            display: block; 
            padding: 0; 
            margin: 0; 
        }
        .mega-list li { 
            display: block; 
            margin-bottom: 0; 
        }
        .mega-link { 
            display: flex !important; 
            justify-content: space-between; 
            align-items: center; 
            padding: 12px 0; 
            color: var(--c-black) !important; 
            font-size: 14px; 
            font-weight: 500; 
            border-bottom: 1px dashed #E5E7EB; 
            background: transparent !important; 
        }
        .mega-link:hover { 
            color: var(--c-audit-blue) !important; 
            padding-left: 8px; 
        }

        /* Mobile Product Cards */
        .series-card { 
            margin-bottom: 12px; 
            border: 1px solid #E5E7EB; 
            background: var(--c-white);
        }
        .series-card:last-child { margin-bottom: 0; }
        .series-head { 
            font-size: 14px; 
            color: var(--c-black) !important;
        }
        .series-meta { 
            color: var(--c-gray-500) !important; 
        }
        
        /* Mobile Actions */
        .mobile-actions-container { 
            display: block !important; 
            padding: 30px 25px; 
            background: #FFFFFF; 
            border-top: 2px solid var(--c-gray-200); 
            margin-top: 0;
            margin-bottom: 0;
        }
        .mobile-actions-container .trace-box { 
            width: 100%; 
            margin-bottom: 15px; 
            border: 1px solid #E5E7EB; 
        }
        .mobile-actions-container .trace-input { 
            width: 100%; 
            color: var(--c-black);
        }
        .mobile-actions-container .btn-primary { 
            width: 100%; 
            height: 50px; 
        }
        
        /* Ensure tags are visible on mobile */
        .tag {
            display: inline-block;
            vertical-align: middle;
        }

        .hero { padding: 40px 20px; grid-template-columns: 1fr; gap: 40px; }
        .hero-title { font-size: 34px; word-wrap: break-word; }
        .grid-container { grid-template-columns: 1fr; }
        .footer-grid { grid-template-columns: 1fr; }
    }


    .btn-outline { 
        background: transparent; 
        color: var(--c-black); 
        font-family: var(--f-mono); 
        font-size: 11px; 
        padding: 0 20px; 
        height: 40px; 
        font-weight: 600; 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        border: 1px solid var(--c-gray-200); 
        transition: all 0.2s; 
        text-transform: uppercase;
    }
    .btn-outline:hover { 
        background: var(--c-black); 
        color: var(--c-white); 
        border-color: var(--c-black); 
    }
    [x-cloak] { display: none !important; }